<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    table {
        border: 1px solid black;
    }
    
    tr,
    td {
        border: 1px solid black;
    }
    
    .color {
        background: skyblue;
    }
    
    .new {
        background: pink;
    }
</style>

<body>
    <div>
        请输入姓名: <input type="text"><br>请输入邮箱:
        <input type="text">
        <button>添加</button>
        <table cellspacing="0">
            <tr class="color">
                <td width="80">姓名</td>
                <td width="300">邮箱</td>
            </tr>
        </table>
    </div>
    <script>
        var inputs = document.querySelectorAll('input');
        var btn = document.querySelector('button');
        var table = document.querySelector('table');
        btn.onclick = function() {
            if (inputs[0].value == '' || inputs[1].value == '') {
                alert('输入不能为空')
            } else {
                var tr = document.createElement('tr');
                var text1 = document.createElement('td');
                var text2 = document.createElement('td');
                text1.innerText = inputs[0].value;
                text2.innerText = inputs[1].value;
                tr.appendChild(text1);
                tr.appendChild(text2);
                tr.className = ('new')
                table.appendChild(tr);

            }


        }
    </script>
</body>

</html>